<template>
    <div>
<h1>简简单单</h1>


<table class="table">
    <thead>
        <tr>
            <td>id</td>
            <td>等级名称</td>
        </tr>
    </thead>

    <tbody>
        <tr v-for="a in data">
            <td>{{a.djId}}</td>
            <td>{{a.djName}}</td>
        </tr>
    </tbody>
</table>

<input type="button" value="首页" @click="fan(1)">
<input type="button" value="上一页" @click="fan(2)">
<input type="button" value="下一页" @click="fan(3)">
<input type="button" value="尾页" @click="fan(4)">

当前第{{querydata.pageindex}}页，共{{xxxxx.zongye}}页，共{{xxxxx.zongtiao}}行，每页{{querydata.pagesize}}条


    </div>
</template>

<script setup lang="ts">
 import { onMounted, ref } from 'vue';
import axios from 'axios';


onMounted (()=>{
    show();
})

const data =ref([{
    "djId": 1,
    "djName": ""
}])

const querydata=ref({
    pageindex:1,
    pagesize:2
})

const xxxxx=ref({
    zongtiao:0,
    zongye:0
})


const fan=(val:any)=>{
    debugger
    if(val==1){
        querydata.value.pageindex=1;
        show();
    }

    if(val==2){
        if(querydata.value.pageindex>1){
            querydata.value.pageindex-=1;
            show();
        }
        
    }

    if(val==3){
        if(xxxxx.value.zongye>querydata.value.pageindex){
            querydata.value.pageindex+=1;
            show()
        }
    }

    if(val==4){
        querydata.value.pageindex=xxxxx.value.zongye;
        show();
    }
}

const show=()=>{
    axios.get("https://localhost:7224/api/Dj/ShowDj",{params:querydata.value}).then(res=>{
        data.value=res.data.plist;

        xxxxx.value.zongtiao=res.data.count

        xxxxx.value.zongye=Math.ceil(xxxxx.value.zongtiao/querydata.value.pagesize)
            console.log(res.data)
            console.log(xxxxx.value.zongye)

    })
}

</script>

<style scoped>

</style>